<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0"
          class="item"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index ? 'cur' : ''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef' + index, 100, index)"
          >{{ item.text }}</el-button>
        </el-badge>
      </ol>
    </div>
    <div
      ref="panelRef0"
      class="basicInfo basicInfo1"
    >
      <div class="title">
        <span>社保概况</span>
        <div>
          <span>年份
            <el-select
              v-model="yfData"
              placeholder=""
              disabled
            >
              <el-option
                v-for="item in yfDataList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
          <span style="margin-left: 30px">险种
            <el-select
              v-model="cbzlTwo"
              placeholder=""
              disabled
            >
              <el-option
                label="养老保险"
                value="养老保险"
              ></el-option>
              <el-option
                label="医疗保险"
                value="医疗保险"
              ></el-option>
              <el-option
                label="失业保险"
                value="失业保险"
              ></el-option>
              <el-option
                label="工伤保险"
                value="工伤保险"
              ></el-option>
              <el-option
                label="生育保险"
                value="生育保险"
              ></el-option>
            </el-select>
          </span>
        </div>
      </div>
      <table
        class="table"
        style="table-layout: fixed"
      >
        <tr>
          <th>企业名称</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>统一社会信用代码</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>最多参保人数（人）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>最少参保人数（人）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>最大缴费金额（元）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>最少缴费金额（元）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>月均缴费金额（元）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>月均缴存人数（人）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>五险累计欠缴金额（元）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>五险累计欠缴次数（次）</th>
          <td>{{sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
      </table>
    </div>
    <div
      ref="panelRef1"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>社保缴费信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="sbjfData"
        style="width: 100%"
        v-loading="loading1"
        :header-cell-style="{ background: '#f2f9fe' }"
        :empty-text="sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'"
      >
        <el-table-column
          prop="JFNY"
          label="缴费年月"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="LB"
          label="类别"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="DWJFJS"
          label="单位缴费基数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CBRY"
          label="参保人数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BYYJJEHJ"
          label="本月应缴金额合计"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="BYSJJEHJ"
          label="本月实缴金额合计"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef2"
      class="basicInfo basicInfo0"
    >
      <div class="titles">
        <div>社保分析</div>
        <div style="display: flex">
          <div>
            险种:
            <el-select
              v-model="cbzl"
              disabled
            >
              <el-option
                label="养老保险"
                value="养老保险"
              ></el-option>
              <el-option
                label="医疗保险"
                value="医疗保险"
              ></el-option>
              <el-option
                label="失业保险"
                value="失业保险"
              ></el-option>
              <el-option
                label="工伤保险"
                value="工伤保险"
              ></el-option>
              <el-option
                label="生育保险"
                value="生育保险"
              ></el-option>
            </el-select>
          </div>
          <div style="marginleft: 30px">
            时间:
            <el-select
              v-model="sjData"
              disabled
            >
              <el-option
                label="近6个月"
                value="7"
              ></el-option>
              <el-option
                label="近12个月"
                value="13"
              ></el-option>
              <el-option
                label="近18个月"
                value="19"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div id="trend"></div>
    </div>
    <div
      ref="panelRef3"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>社保欠缴金额</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="sbqjData"
        style="width: 100%"
        v-loading="loading2"
        :header-cell-style="{ background: '#f2f9fe' }"
        :empty-text="sbgjj && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="QJTJKSRQ"
          label="欠缴统计开始日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="QJTJJZRQ"
          label="欠缴统计截至日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="QJSD"
          label="欠缴时段"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="QJJEHJ"
          label="欠缴合计金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SFBJ"
          label="是否补缴"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  sbjfxx,
  sbsjjetb,
  nmcbtb,
  sbqjPage,
  gjjjcPage,
  getSbgk,
  getSbgkNf,
  getSbfx,
} from '@/api/portay'
export default {
  props: ['comInfo','sbgjj','sqStatu'],
  data() {
    return {
      activeIndex: 'a',
      cbzl: '暂无数据',
      cbzlTwo: '暂无数据',
      list: [
        { text: '社保概况' },
        { text: '社保缴费信息', disabled: false },
        { text: '社保分析' },
        { text: '社保欠缴信息', disabled: false },
      ],
      month: '',
      loading1: false,
      sbjfData: [],
      dialogVisible1: false,
      pagination1: { page: 1, total: 0 },
      sbjfMoreData: [],
      loading2: false,
      sbqjData: [],
      dialogVisible2: false,
      pagination2: { page: 1, total: 0 },
      sbqjMoreData: [],
      loading3: false,
      gjjjcData: [],
      dialogVisible3: false,
      pagination3: { page: 1, total: 0 },
      gjjjcMoreData: [],
      sbgkObj: {},
      loadingSbgk: true,
      yfDataList: [],
      yfData: '暂无数据',
      sjData: '暂无数据',
    }
  },
  created() {
    this.getDict()
    this.$nextTick(() => {
      this.getAjqsInfo()
    })
  },
  /* watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          this.getAjqsInfo()
        }
      },
      deep: true,
      immediate: true,
    },
  }, */
  methods: {
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'zxgslxr',
      })
      this.open(dataSQQD[0].value)
    },
    open(e) {
      let str = (this.sbgjj && (this.sqStatu == '未授权')) ? '您查询的企业暂未授权，无法查看当前信息!' : `您当前暂无相关内容查看权限，\n如需开通权限请及时联系淄博征信有限公司:${e}`
      this.$alert(str,'提示',
        {
          confirmButtonText: '关闭',
          center: true,
          dangerouslyUseHTMLString: true,
          callback: (action) => {},
        }
      )
    },
    //获取社保分析数据
    getAjqsInfo() {
      let str = (this.sbgjj && (this.sqStatu == '未授权')) ? '企业暂未授权' : '暂无查看权限'
      var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">${str}</span></div>`
      document.getElementById('trend').innerHTML = html
      document.getElementById('trend').removeAttribute('_echarts_instance_')
      /* getSbfx({
        TYSHXYDM: this.comInfo.shtyxydm,
        sjcd: this.sjData,
        XZLB: this.cbzl,
      }).then((res) => {
        if (res.status) {
          let xData = []
          let jeData = []
          let jehbData = []
          let jetbData = []
          let rsData = []
          let rshbData = []
          let rstbData = []
          let jepjz = []
          let rspjz = []
          res.data.zxt.forEach((item) => {
            xData.push(item.lastDays)
            jeData.push(item.BYSJJEHJ)
            rsData.push(item.CBRY)
            jehbData.push(item.BYSJJEHJHB)
            jetbData.push(item.BYSJJEHJTB)
            rshbData.push(item.CBRYHB)
            rstbData.push(item.CBRYTB)
            res.data.avg.BYSJJEHJAVG
              ? jepjz.push(res.data.avg.BYSJJEHJAVG)
              : jepjz.push(0)
            res.data.avg.CBRYAVG
              ? rspjz.push(res.data.avg.CBRYAVG)
              : rspjz.push(0)
          })
          this.$nextTick(() => {
            this.getCaseTrend(
              xData,
              jeData,
              rsData,
              jehbData,
              rshbData,
              jepjz,
              rspjz,
              jetbData,
              rstbData
            )
          })
        } else {
          var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
          document.getElementById('trend').innerHTML = html
          document.getElementById('trend').removeAttribute('_echarts_instance_')
        }
      }) */
    },
    //社保分析
    getCaseTrend(
      xData,
      jeData,
      rsData,
      jehbData,
      rshbData,
      jepjz,
      rspjz,
      jetbData,
      rstbData
    ) {
      if (xData.length > 0 && jeData.length > 0 && rsData.length > 0) {
        let chartDom = document.getElementById('trend')
        let myChart1 = echarts.init(chartDom)
        let option

        option = {
          title: {
            text: '',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
            formatter: function (params) {
              var str = '' //声明一个变量用来存储数据
              str += '<div>' + params[0].name + '</div>' //显示日期的函数
              for (var i = 0; i < params.length; i++) {
                str +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>' +
                  params[i].seriesName +
                  '</span> : <span>' +
                  (params[i].seriesName == '实缴金额' ||
                  params[i].seriesName == '月均实缴金额'
                    ? params[i].data + '元'
                    : params[i].seriesName == '参保人数' ||
                      params[i].seriesName == '月均参保人数'
                    ? params[i].data + '人'
                    : params[i].data) +
                  '</br>'
              }
              return str
            },
          },
          //color: ['#73a0fa', '#93a0fa', '#23a0fa'],
          color: [
            '#8080ff',
            '#8080ff',
            '#8080ff',
            '#ec808d',
            '#ec808d',
            '#ec808d',
            '#02a7f0',
            '#f59a23',
          ],
          legend: {
            data: [
              { name: '实缴金额' },
              { name: '参保人数' },
              { name: '月均实缴金额' },
              { name: '月均参保人数' },
            ],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
              interval: 0, //X轴信息全副展现
              rotate: xData.length > 13 ? -20 : 0,
            },
          },
          yAxis: [
            {
              type: 'value',
              name: '实缴金额\n单位:元',
              axisLabel: {
                //y轴上带的单位
                formatter: '{value}',
              },
              //标题样式
              nameTextStyle: {
                fontSize: '15px',
                color: '#000',
                fontWeight: 900,
              },
              //轴线
              axisLine: {
                show: true,
              },
              //分割线
              splitLine: {
                show: false,
              },
            },
            {
              type: 'value',
              name: '参保人数\n单位:人',
              axisLabel: {
                //y轴上带的单位
                formatter: '{value}',
              },
              nameTextStyle: {
                fontSize: '15px',
                color: '#000',
                fontWeight: 900,
              },
              //轴线
              axisLine: {
                show: true,
              },
              //分割线
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '实缴金额',
              data: jeData,
              type: 'line',
              symbolSize: 8, // 设置折线上圆点大小
              symbol: 'circle', // 设置拐点为实心圆
              yAxisIndex: 0,
              // markLine: {
              //   data: [
              //     { type: 'average', name: '平均值' },
              //   ],
              //   label: {
              //     normal: {
              //       position: 'end',
              //       color: '#8080ff',
              //       fontSize: 16,
              //       formatter: '实缴金\n额平均: \n {c}元',
              //     },
              //   },
              // },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#8080ff',
                  },
                  // formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调
                  //   if (params.value) {//如果当前值存在则拼接
                  //     return params.value + '元'
                  //   } else {//否则返回个空
                  //     return 0;
                  //   }
                  // }
                },
              },
            },
            {
              name: '实缴金额环比增长',
              data: jehbData,
              type: 'line',
            },
            {
              name: '实缴金额同比增长',
              data: jetbData,
              type: 'line',
            },
            {
              name: '参保人数',
              data: rsData,
              type: 'line',
              symbolSize: 8, // 设置折线上圆点大小
              symbol: 'circle', // 设置拐点为实心圆
              yAxisIndex: 1,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFCC99',
                  },
                  // formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调
                  //   if (params.value) {//如果当前值存在则拼接
                  //     return params.value + '人'
                  //   } else {//否则返回个空
                  //     return 0;
                  //   }
                  // }
                },
              },
            },
            {
              name: '参保人数环比增长',
              data: rshbData,
              type: 'line',
            },
            {
              name: '参保人数同比增长',
              data: rstbData,
              type: 'line',
            },
            {
              name: '月均实缴金额',
              type: 'line',
              data: jepjz,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: 'dotted', //'dotted'虚线 'solid'实线
                  },
                },
              },
            },
            {
              name: '月均参保人数',
              type: 'line',
              data: rspjz,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: 'dotted', //'dotted'虚线 'solid'实线
                  },
                },
              },
            },
          ],
        }
        option && myChart1.setOption(option)
        window.addEventListener('resize', () => {
          myChart1.resize()
        })
      } else {
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
        document.getElementById('trend').innerHTML = html
        document.getElementById('trend').removeAttribute('_echarts_instance_')
      }
    },
    // 复制操作
    _copy(context) {
      navigator.clipboard
        .writeText(context)
        .then(() => {
          this.$message.success('复制成功')
        })
        .catch((err) => {
          this.$message.error('复制失败')
        })
    },
    //社保缴费信息
    sbjf() {
      this.loading1 = true
      let index = this.list.findIndex((item) => item.text == '社保缴费信息')
      sbjfxx({ TYSHXYDM: this.comInfo.shtyxydm, pageNum: 1, pageSize: 5 }).then(
        (res) => {
          this.loading1 = false
          this.sbjfData = res.data.records
          this.list[index].num = res.data.total
        }
      )
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度

      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped lang="scss">
.containter {
  width: 100%;
  .step {
    ol.titt {
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 350px;
      right: 24px;
      z-index: 999;
    }
    ol.titt .button {
      width: 150px;
      margin: 0;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
    #trend {
      width: 1400px;
      height: 400px;
      border-radius: 4px;
      padding: 12px;
      box-shadow: 0 0 10px #e8eaef;
    }
    .titles {
      display: flex;
      margin: 10px 0;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 900;
    }
  }
  .basicInfo1 {
    .title {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    .table {
      width: 100%;
      height: 100px;
      border-collapse: collapse;
      th,
      td {
        width: 238px;
        height: 56px;
        border: #eff1f7 solid 1px;
      }
      th {
        background-color: #f2f9fe;
      }
      td {
        padding-left: 10px;
        text-align: left;
        color: #a6a6a6 !important;
      }
      .jyfw {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .basicInfo7 {
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .echart {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #social,
      #endowment,
      #gjjjcje,
      #gjjjcrs {
        width: 700px;
        height: 500px;
        border-radius: 4px;
        padding: 12px;
        box-shadow: 0 0 10px #e8eaef;
      }
      .cbrs {
        position: relative;
        .cbzl {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1;
        }
        #endowment {
          position: relative;
          z-index: 0;
        }
      }
    }
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #ccc;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.block {
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
